<template>
    <el-dialog
            :title="opt.title"
            :visible.sync="visible"
            width="80%"
            @close="close"
            :show-close="false"
            :close-on-click-modal="false"
            :append-to-body="true"
            :modal-append-to-body="true"
            center>
        <div v-html="opt.content"></div>
        <span slot="footer" class="dialog-footer" style="margin: 0 -15px;">
            <el-button @click="clickHandle(item,$event)" v-for="(item, i) in opt.btns" :key="i"
                       size="mini">{{item.label}}</el-button>
        </span>
    </el-dialog>
</template>
<script>
export default {
  name: 'alert',
  data() {
    return {
      visible: this.dialogVisible,
      opt: this.options
    }
  },
  props: {
    options: {
      type: Object,
      default: () => {
        return {
          title: '',
          content: String,
          btns: [{
            label: '确认',
            handel() {

            }
          }]
        }
      }
    }
  },
  methods: {
    async clickHandle(item, e) {
      if (!item.handel) {
        this.close();
      } else if (item.handel && await item.handel(e)) {
        this.close();
      }
    },
    close() {
      this.visible = false;
    },
    show(options) {
      this.opt = options;
      this.visible = true;
    }
  },
  watch: {
    options: {
      handler(val, o) {
        this.opt = val;
      },
      immediate: true,
      deep: true
    }
  }
}
</script>
